<!--
 * @Author: 王坤
 * @LastEditors: 王坤
 * @Description: 放大镜渲染态
-->
<template>
  <div class="lc-magnifier">
    <div class="lc-magnifier-text" @click="magnifierDialog = true">
      {{ formattingString || num }}
    </div>
    <el-dialog
      v-model="magnifierDialog"
      width="80%"
      center
      :append-to-body="true"
      style="margin-top: 15vh"
    >
      <div class="lc-magnifier-dialog-text">
        {{ formattingString || num }}
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
  //每几位添加空格
  addSpace: {
    type: [Number, String],
    default: ''
  },
  //特殊格式化
  specialFormatting: {
    type: [Number, String],
    default: ''
  },
  //需要格式化值
  num: {
    type: [Number, String],
    default: ''
  },
  // 替换值
  replaceValue: {
    type: [Number, String],
    default: ''
  },
  //输入正则
  regExp: {
    type: [Number, String],
    default: ''
  }
});
const magnifierDialog = ref(false);
const formattingString = ref(props.num);
watch(
  () => props.specialFormatting,
  (val) => {
    val && specialFormattingFun(JSON.parse(val));
  },
  { immediate: true }
);
watch(
  () => props.regExp,
  (val) => {
    val && regExpFun(props.regExp, props.replaceValue);
    !val && !props.specialFormatting && (formattingString.value = props.num);
  },
  { immediate: true }
);
watch(
  () => props.replaceValue,
  (val) => {
    val && regExpFun(props.regExp, props.replaceValue);
    !val && !props.specialFormatting && (formattingString.value = props.num);
  },
  { immediate: true }
);
function specialFormattingFun(val) {
  const startNum = val[0];
  const endNum = val[1];
  formattingString.value = props.num
    .replace(/\s/g, '')
    .replace(new RegExp('\(?<=.{' + startNum + '}).(?=.{' + endNum + '})', 'g'), '*');
}
function regExpFun() {
  try {
    formattingString.value = props.num.replace(
      new RegExp(`${props.regExp}`, 'g'),
      props.replaceValue
    );
  } catch (error) {
    console.log('lc-magnifier', error);
  }
}
</script>
